<template>
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="车辆基本信息" name="1">
          <my-form form-class="form-car" :model="car" :form-items="formItems.basic" ref="formBasic" :label-width="labelWidth"></my-form>
        </el-collapse-item>
        <el-collapse-item title="车辆保险信息" name="2">
          <div v-for="(insurance, index) in insuranceList" :class="'insurance-container'+(index>0?' insurance-border-top':'')">
            <my-form form-class="form-car" :model="insurance" :form-items="formItems.insurance" :ref="'formInsurance'+index" :label-width="labelWidth"></my-form>
            <el-button class="insurance-delete" type="danger" size="mini" @click="deleteInsurance(index)">删除</el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
      <div class="btn-container">
        <el-button @click="addInsurance">添加保险信息</el-button>
        <el-button type="primary" @click="submitEdit">保存</el-button>
        <el-button type="info" @click="cancelEdit">{{cancelText}}</el-button>
      </div>
    </div>
</template>

<script>
  const formItems = {
    basic:[
      //  车牌号
      {
        name: 'carno',
        label:'车牌号',
        type:'text',
        rule:{required: true, message: '请输入车牌号', trigger:'blur'}
      },
      // 车主名称(未找到相应字段)


// 机动车所有人
      {
        name: 'carOwner',
        label:'机动车所有人',
        type:'text',
        rule:{required: true, message: '请输入机动车所有人', trigger:'blur'}
      },
// 车辆关系
      {
        name: 'relation',
        label:'车辆关系',
        type:'select',
        data: selectDatas.CarRelation,
        rule:{required: true, message: '请选择车辆关系', trigger:'change'}
      },

// 车辆产权关系(未找到相应字段)


// 制造商名称
      {
        name: 'manufacturer',
        label:'制造商名称',
        type:'text',
        rule:{required: true, message: '请输入制造商名称', trigger:'blur'}
      },
// 购买时间
      {
        name: 'startDate',
        label:'购买时间',
        placeholder:'购买时间',
        type:'date',
        rule:{type: 'date', required: true, message: '请选择购买时间', trigger:'change'},
      },
// 车辆类型
      {
        name: 'category',
        label:'车辆类型',
        type:'text',
        rule:{required: true, message: '请输入车辆类型', trigger:'blur'}
      },
// 车架号(未找到相应字段)

// 车辆品牌(未找到相应字段)

// 发动机型号
      {
        name: 'engineno',
        label:'发动机型号',
        type:'text',
        rule:{required: true, message: '请输入发动机型号', trigger:'blur'}
      },
// 车辆型号
      {
        name: 'model',
        label:'车辆型号',
        type:'text',
        rule:{required: true, message: '请输入车辆型号', trigger:'blur'}
      },
// 发动机排量功率(未找到相应字段)

//发动机号(未找到相应字段)

// 发动机马力(未找到相应字段)

// 轮距(未找到相应字段)

// 轮胎规格
      {
        name: 'tyre',
        label:'轮胎规格',
        type:'text',
        rule:{required: true, message: '请输入轮胎规格', trigger:'blur'}
      },
// 钢板数
      {
        name: 'steel',
        label:'钢板数',
        type:'number',
        rule:{type:'number',required: true, min:1, message: '请输入钢板数'}
      },
// 轴距
      {
        name: 'wheelbase',
        label:'轴距',
        type:'number',
        rule:{type:'number',required: true, min:1, message: '请输入轴距'}
      },
// 轴数
      {
        name: 'axes',
        label:'轴数',
        type:'number',
        rule:{type:'number',required: true, min:1, message: '请输入轴数'}
      },

// 登记尺寸(未找到相应字段)

// 登记机关(未找到相应字段)

// 登记日期
      {
        name: 'registerDate',
        label:'登记日期',
        placeholder:'登记日期',
        type:'date',
        rule:{type: 'date', required: true, message: '请选择登记日期', trigger:'change'},
      },
// 原值
      {
        name: 'initial',
        label:'原值',
        type:'number',
        rule:{type:'number',required: true, min:1, message: '请输入原值'}
      },
// 残值
      {
        name: 'left',
        label:'残值',
        type:'number',
        rule:{type:'number',required: true, min:1, message: '请输入残值'}
      },
// 含车购税价(未找到相应字段)

// 月折旧值(未找到相应字段)

// 已使用年限
      {
        name: 'age',
        label:'已使用年限',
        type:'number',
        rule:{type:'number',required: true, min:1, message: '请输入已使用年限'}
      },
// 剩余使用年限(未找到相应字段)

// 净值(未找到相应字段)

// 是否报废(未找到相应字段)

// 资产损益情况(未找到相应字段)

// 行驶证号码
      {
        name: 'code',
        label:'行驶证号码',
        type:'text',
        rule:{required: true, message: '请输入行驶证号码', trigger:'blur'}
      },
// 行驶证(文件)
      {
        name: 'path1',
        label:'行驶证文件上传(正面)',
        type:'singleImage',
        maxFileSize:1,
        rule:{required: true, message: '请选择文件'}
      },
      {
        name: 'path2',
        label:'行驶证文件上传(反面)',
        type:'singleImage',
        maxFileSize:1,
        rule:{required: true, message: '请选择文件'}
      },

// 营运证号码
      {
        name: 'runNo',
        label:'营运证号码',
        type:'text',
        rule:{required: true, message: '请输入营运证号码', trigger:'blur'}
      },
// 营运证(文件)
      {
        name: 'runPath1',
        label:'营运证文件上传(正面)',
        type:'singleImage',
        maxFileSize:1,
        rule:{required: true, message: '请选择文件'}
      },        {
        name: 'runPath2',
        label:'营运证文件上传(正面)',
        type:'singleImage',
        maxFileSize:1,
        rule:{required: true, message: '请选择文件'}
      },
  ],
    insurance:[
      // 保险种类
      {
        name: 'category',
        label:'保险种类',
        type:'select',
        data: selectDatas.InsuranceType,
        rule:{required: true, message: '请选择保险种类', trigger:'change'}
      },
// 保险公司
      {
        name: 'companyname',
        label:'保险公司',
        type:'text',
        rule:{required: true, message: '请输入保险公司名称', trigger:'blur'}
      },
// 保单号
      {
        name: 'policynum',
        label:'保单号',
        type:'text',
        rule:{required: true, message: '请输入保单号', trigger:'blur'}
      },
// 投保日
      {
        name: 'startDate',
        label:'投保日',
        placeholder:'投保日',
        type:'date',
        rule:{type: 'date', required: true, message: '请选择投保日', trigger:'change'},
      },
// 截止日
      {
        name: 'endDate',
        label:'截止日',
        placeholder:'截止日',
        type:'date',
        rule:{type: 'date', required: true, message: '请选择截止日', trigger:'change'},
      },
    ],
  }
  import MyForm from '../../../components/MyForm';
  import * as selectDatas from '../../../constants/select-datas';
    export default {
        name: 'CarEdit',
      props:{
        car: Object,
        required: false,
      },
      components:{
        MyForm
      },
      created(){
          this.insuranceList = (this.car && this.car.insurance && JSON.parse(this.car.insurance))||[];
      },
      watch:{
        car(){
          this.insuranceList = (this.car && this.car.insurance && JSON.parse(this.car.insurance))||[];
        }
      },
        data() {
            return {
              formItems: formItems,
              labelWidth: "180px",

              insuranceList:[],
              activeNames:['1','2']
            }
        },
      computed:{
        cancelText(){
          if(this.car){
            return "取消编辑"
          }else{
            return "取消添加"
          }
        }
      },
      methods:{
        addInsurance(){
          this.insuranceList.push({});
        },
        deleteInsurance(index){
          this.insuranceList.splice(index,1);
        },
        submitEdit(){
          let me = this;
          let targetObj = {};
          this.$refs['formBasic'].validate((valid)=>{
            if(valid){
              targetObj={...me.$refs[`formBasic`].nowModel}
              if(me.insuranceList.length>0){
                targetObj.insurance = [];
                me.validateInsurance(targetObj, 0);
              }else{
                targetObj.insurance='';
                me.$emit('submitEdit', targetObj);
              }
            }
          })
        },
        validateInsurance(targetObj, index){
          let me = this;
          let refName = `formInsurance${index}`
          me.$refs[refName][0].validate((valid)=>{
            if(valid){
              targetObj.insurance.push(me.$refs[refName][0].nowModel);
              if(index<(me.insuranceList.length-1)){
                me.validateInsurance(targetObj, index+1)
              }else{
                targetObj.insurance = JSON.stringify(targetObj.insurance)
                me.$emit('submitEdit', targetObj);
              }
            }
          })
        },
        cancelEdit(){
          this.$emit('cancelEdit')
        }
      }
    }
</script>

<style lang="stylus" scoped>
  .form-car
    width: 600px
  .insurance-container
    display: flex
    align-items: flex-start
    .insurance-delete
      margin-left: 30px
  .insurance-border-top
    border-top: 1px solid #e6ebf5
    padding-top: 20px
  .btn-container
    margin-top: 15px
    padding-left: 180px
</style>
